<template>
   <div class="channel_edit">
      <!-- 我的频道 -->
      <van-cell>
         <div slot="title" class="title_text">我的频道</div>
         <!-- 按钮默认插槽为右边位置 -->
         <van-button
            type="danger"
            round
            plain
            size="small"
            :border="false"
            class="edit_btn"
            @click="isEdit = !isEdit"
            >{{ isEdit ? '完成' : '编辑' }}</van-button
         >
      </van-cell>
      <!-- :gutter="10" 中间间隔 -->
      <van-grid :gutter="10" class="my_grid">
         <van-grid-item
            v-for="(channel, index) in my_channels"
            :key="index"
            class="grid_item"
            @click="onMyChannelClick(channel, index)"
         >
            <!-- 图标单独插槽，因为要控制它 -->
            <!-- v-show 消耗较少因为图标相对于切换很频繁 -->
            <!-- includes 看数组中是否包含某一个元素，返回布尔值 -->
            <van-icon
               slot="icon"
               name="clear"
               v-show="
                  isEdit &&
                     !flexChannels.includes(channel.id)
               "
            ></van-icon>
            <!-- v-bind: class 语法
         一个对象，对象中国的 key 表示要作用的 css 类名
         对象中的value 要计算出布尔值
         true 作用类名
         false 不作用类名 -->
            <span
               class="text"
               slot="text"
               :class="{ active: index === active }"
               >{{ channel.name }}</span
            >
         </van-grid-item>
      </van-grid>
      <!-- 我的频道结束 -->
      <!-- 频道推荐 -->
      <van-cell>
         <div slot="title" class="title_text">频道推荐</div>
      </van-cell>
      <van-grid :gutter="10" class="recommend_grid">
         <van-grid-item
            v-for="(channel, index) in recommendChannels"
            :key="index"
            :text="channel.name"
            class="grid_item"
            icon="plus"
            @click="onAddChannel(channel)"
         />
      </van-grid>
      <!-- 频道推荐结束 -->
   </div>
</template>

<script>
import {
   getAllChannels,
   addUserChannel,
   deleteUserChannel
} from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storige'
export default {
   name: 'ChannelEdit',
   data() {
      return {
         // 所有频道列表
         allChannels: [],
         // 控制编辑状态的显示
         isEdit: false,
         // 固定频道，不允许删除
         flexChannels: [0]
      }
   },
   props: {
      my_channels: {
         type: Array,
         required: true
      },
      active: {
         type: Number,
         required: true
      }
   },
   created() {
      this.loadAllChannels()
   },
   methods: {
      // 获取所有频道的数据
      async loadAllChannels() {
         try {
            const { data } = await getAllChannels()
            // console.log(data)
            this.allChannels = data.data.channels
         } catch (err) {
            this.$toast('数据获取失败')
         }
      },
      // 点击把推荐频道添加到我的频道
      async onAddChannel(channel) {
         this.my_channels.push(channel)

         // 数据持久化处理
         if (this.user) {
            try {
               // 已登录，把数据同步到线上
               await addUserChannel({
                  // 频道id
                  id: channel.id,
                  // 序号，编号（从1开始）第几个
                  seq: this.my_channels.length
               })
            } catch (err) {
               this.$toast('保存失败，请稍后重试')
            }
         } else {
            // 未登录，把数据存储到本地
            // 每次存储再次存一遍，覆盖之前的
            setItem('TOUTIAO_CHANNELS', this.my_channels)
         }
      },
      // 点击切换
      onMyChannelClick(channel, index) {
         if (this.isEdit) {
            // 1.如果是固定频道 则不删除
            if (this.flexChannels.includes(channel.id)) {
               return
            }

            // 2.如果是编辑状态则执行删除频道
            this.my_channels.splice(index, 1)
            // 参数1：删除元素开始的索引（包括它）
            // 参数2：删除的个数

            // 3. 如果删除的频道是激活频道的前一项，更新频道的激活项
            if (index <= this.active) {
               // 让激活频道的索引 -1
               this.$emit(
                  'update_active',
                  this.active - 1,
                  true
               )
            }
            // 4.处理持久化  单独封装
            this.deleteChannel(channel)
         } else {
            // 4.如果是非编辑状态则执行切换频道
            // 字传父
            this.$emit('update_active', index, false)
         }
      },
      // 删除频道，单独封装
      async deleteChannel(channel) {
         try {
            if (this.user) {
               // 已登录，将数据更新到线上
               await deleteUserChannel(channel.id)
            } else {
               // 未登录，将数据更新到本地
               // 修改本地存储就是重新存一下，存的是删除之后的频道列表数据
               setItem('TOUTIAO_CHANNELS', this.my_channels)
            }
         } catch (err) {
            this.$toast('操作失败，请稍后重试')
         }
      }
   },
   computed: {
      ...mapState(['user']),
      
      // 推荐频道数组
      // 相对于下边的简写
      // 计算属性的特点：观测内部依赖数据的变化
      // 依赖数据变化，计算属性重新执行
      recommendChannels() {
         // 这是数组的 filter 方法，遍历数组，
         // 把符合条件的元素存储到新数组中并返回
         // filter 的返回值为 true
         return this.allChannels.filter(channel => {
            // 相当于在内部自动创建了一个数组
            // const channels = []
            // find 方法也是遍历数组，把符合条件的第一个元素返回
            return !this.my_channels.find(myChannel => {
               return myChannel.id === channel.id
            })
         })
      }
      // recommendChannels() {
      //    // 存储推荐频道数组
      //    const channels = []
      //    this.allChannels.forEach(channel => {
      //       // find 也是遍历数组，也是找到满足条件的元素
      //       const ret = this.my_channels.find(
      //          myChannel => {
      //             return myChannel.id === channel.id
      //          }
      //       )
      //       // 如果我的频道中不包括该频道项，则收集到推荐频道中
      //       if (!ret) {
      //          channels.push(channel)
      //       }
      //    })
      //    // 把计算结果返回
      //    return channels
      // }
   }
}
</script>

<style lang="less" scoped>
.channel_edit {
   padding: 85px 0;
   .title_text {
      font-size: 32px;
      color: #333;
   }
   .edit_btn {
      width: 104px;
      height: 48px;
      font-size: 26px;
      color: #f85959;
      border: 1px solid #f85959;
   }
   /deep/ .grid_item {
      width: 160px;
      height: 86px;
      .van-grid-item__content {
         white-space: nowrap;
         background-color: #f4f5f6;
         .van-grid-item__text,
         .text {
            font-size: 28px;
            color: #222;
            margin-top: 0;
         }
         .active {
            color: red;
         }
         .van-grid-item__icon-wrapper {
            position: unset;
         }
      }
   }
   /deep/ .my_grid {
      .grid_item {
         .van-icon-clear {
            position: absolute;
            top: -10px;
            right: -10px;
            color: #cacaca;
            z-index: 2;
            font-size: 30px;
         }
      }
   }
   /deep/ .recommend_grid {
      .grid_item {
         .van-grid-item__content {
            flex-direction: row;
            .van-icon-plus {
               font-size: 28px;
               margin-right: 6px;
            }
         }
      }
   }
}
</style>
